<template>
  <a-modal
    :visible="localVisible"
    title="添加资源"
    @ok="handleOk"
    @cancel="handleCancel"
  >
    <a-form :model="resourceForm">
      <a-form-item label="资源名称">
        <a-input v-model:value="resourceForm.title" />
      </a-form-item>
      <a-form-item label="资源描述">
        <a-input v-model:value="resourceForm.description" />
      </a-form-item>
      <a-form-item label="资源类型">
        <a-select v-model:value="resourceForm.type">
          <a-select-option value="ppt">PPT</a-select-option>
          <a-select-option value="transcript">逐字稿</a-select-option>
          <a-select-option value="plan">教案</a-select-option>
          <a-select-option value="media">媒体资源</a-select-option>
        </a-select>
      </a-form-item>
    </a-form>
  </a-modal>
</template>

<script>
import { FileOutlined, FileTextOutlined, CalendarOutlined, VideoCameraOutlined } from "@ant-design/icons-vue";
export default {
  name: "AddResourceModal",
  props: {
    visible: { type: Boolean, default: false }
  },
  data() {
    return { resourceForm: { title: "", description: "", type: "" } };
  },
  computed: {
    localVisible: {
      get() {
        return this.visible;
      },
      set(val) {
        this.$emit("update:visible", val);
      }
    }
  },
  methods: {
    handleOk() {
      const { title, description, type } = this.resourceForm;
      if (title.trim() && description.trim() && type) {
        // 根据类型选择图标
        let icon;
        switch (type) {
          case "ppt": icon = FileOutlined; break;
          case "transcript": icon = FileTextOutlined; break;
          case "plan": icon = CalendarOutlined; break;
          case "media": icon = VideoCameraOutlined; break;
          default: icon = FileOutlined;
        }
        this.$emit("add-resource", { ...this.resourceForm, icon });
        this.resourceForm = { title: "", description: "", type: "" };
        this.localVisible = false;
      } else {
        alert("所有字段都必须填写！");
      }
    },
    handleCancel() {
      this.localVisible = false;
    }
  }
};
</script>
